<template>
    <van-nav-bar title="商品类目" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tree-select v-model:active-id="rightactiveId" v-model:main-active-index="leftactiveIndex" :items="categoryData">
        <template #content>
            <van-grid :column-num="3" icon-size="50px">
                <van-grid-item v-for="item in categoryData[leftactiveIndex]?.children" :key="item.id" :icon="getUrlImage(item.categoryImage)" :text="item.categoryName"
                     :to="({ name: 'malllist', query: { categoryId : item.id} })"/>
                <!-- <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"
                    :to="({ name: 'mallList', query: { id: value.id } })" /> -->
            </van-grid>


        </template>



    </van-tree-select>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { listCategory } from '@/api/category/category.js'

const onClickLeft = () => history.back();
//右侧选中项的id
const rightactiveId = ref(1);
// 左侧选中项的索引
const leftactiveIndex = ref(0);
const items = [
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3, disabled: true },
        ],
    },
]
const categoryData = ref([])
const categoryData2 = ref([
    { id: 1, name: '手机', img: '', parentId: 0 },
    { id: 2, name: '小米手机', img: '', parentId: 1 },
    { id: 3, name: '华为手机', img: '', parentId: 1 },
    { id: 4, name: '笔记本', img: '', parentId: 0 },
    { id: 5, name: '华为笔记本', img: '', parentId: 4 },
    { id: 6, name: '小米笔记本', img: '', parentId: 4 },

])

onMounted(() => { 
//     categoryData2.value.forEach(item => { 
//         item.text= item.name
//     })
//     console.log(categoryData2.value);
//    const categoryData3= categoryData2.value.reduce((newArray,currentValue) => { 
//         currentValue.children = categoryData2.value.filter(item => { 
//             return item.parentId === currentValue.id
//         })
//         //获取父类的数据并存入数组中
//         if (currentValue.parentId === 0) { 
//             newArray.push(currentValue)
//         }
//         return newArray;
//    }, [])
//     console.log(categoryData3);
//     categoryData2.value = categoryData3;
    //放入立即渲染中执行函数
    CallcategoryApi()
})


//定义了一个api接口
const CallcategoryApi = () => { 
    listCategory().then(res => { 
       console.log(res);
       res.data.forEach(item => {
           item.text = item.categoryName
        })
        const categoryData2 = res.data.reduce((newArray, currentValue) => {
            currentValue.children = res.data.filter(item => {
                return item.parentCategoryId === currentValue.id
            })
            //获取父类的数据并存入数组中
            if (currentValue.parentCategoryId === 0) {
                newArray.push(currentValue)
            }
            return newArray;
        }, [])
        console.log(categoryData2);
        
        categoryData.value = categoryData2
    })
}

//构建函数
const getUrlImage = (imgpath) => { 
    console.log(imgpath);
    
    // if (imgpath) return '';
    return imgpath.replace('/profile', 'http://www.hphs.com')
}
</script>

<style lang="scss" scoped>

</style>